<template>
  <div class="student-list-test">
    <h1>学生列表功能测试</h1>
    
    <div class="test-sections">
      <!-- 学生名称/登录名验证测试 -->
      <div class="test-section">
        <h2>学生名称/登录名验证测试</h2>
        <div class="test-data">
          <div v-for="student in testStudents" :key="student.id" class="student-item">
            <div class="student-info">
              <strong>原始数据:</strong>
              <div>姓名: "{{ student.name }}"</div>
              <div>登录名: "{{ student.loginName }}"</div>
            </div>
            <div class="student-display">
              <strong>显示结果:</strong>
              <div>姓名: {{ getStudentName(student) }}</div>
              <div>登录名: {{ getStudentLogin(student) }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页组件测试 -->
      <div class="test-section">
        <h2>分页组件中文化测试</h2>
        <div class="pagination-test">
          <h3>带中文配置的分页</h3>
          <el-config-provider :locale="zhCn">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="100"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </el-config-provider>
          
          <h3>不带中文配置的分页（对比）</h3>
          <el-pagination
            v-model:current-page="currentPage2"
            v-model:page-size="pageSize2"
            :page-sizes="[10, 20, 50, 100]"
            :total="100"
            layout="total, sizes, prev, pager, next, jumper"
          />
        </div>
      </div>
      
      <!-- 正则表达式规则说明 -->
      <div class="test-section">
        <h2>登录名正则规则说明</h2>
        <div class="regex-info">
          <p><strong>规则:</strong> /^[a-zA-Z0-9_]{3,20}$/</p>
          <ul>
            <li>只允许字母（a-z, A-Z）</li>
            <li>只允许数字（0-9）</li>
            <li>只允许下划线（_）</li>
            <li>长度必须在3-20位之间</li>
          </ul>
          
          <div class="examples">
            <h4>有效示例:</h4>
            <ul>
              <li>zhangsan ✓</li>
              <li>user123 ✓</li>
              <li>test_user ✓</li>
              <li>User_123 ✓</li>
            </ul>
            
            <h4>无效示例:</h4>
            <ul>
              <li>ab ✗ (长度不足)</li>
              <li>user@123 ✗ (包含特殊字符@)</li>
              <li>user-name ✗ (包含连字符-)</li>
              <li>"" ✗ (空字符串)</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

// 测试数据接口
interface TestStudent {
  id: string
  name: string
  loginName: string
}

// 分页数据
const currentPage = ref(1)
const pageSize = ref(10)
const currentPage2 = ref(1)
const pageSize2 = ref(10)

// 测试学生数据
const testStudents = ref<TestStudent[]>([
  { id: '1', name: '张三', loginName: 'zhangsan' },
  { id: '2', name: '李四', loginName: 'li@si' },
  { id: '3', name: '王五', loginName: '' },
  { id: '4', name: '', loginName: 'student_test' },
  { id: '5', name: '赵六', loginName: 'ab' },
  { id: '6', name: '钱七', loginName: 'user-name' },
  { id: '7', name: '孙八', loginName: 'valid_user_123' },
])

// 获取学生名称（带验证）
const getStudentName = (student: TestStudent): string => {
  if (!student.name || student.name.trim() === '') {
    return '没有学生名称数据'
  }
  return student.name
}

// 获取学生登录名（带正则验证）
const getStudentLogin = (student: TestStudent): string => {
  if (!student.loginName || student.loginName.trim() === '') {
    return '没有登录名数据'
  }

  // 登录名正则规范：只允许字母、数字、下划线，长度3-20位
  const loginNameRegex = /^[a-zA-Z0-9_]{3,20}$/

  if (!loginNameRegex.test(student.loginName)) {
    return '没有登录名规范数据'
  }

  return '登录名：' + student.loginName
}
</script>

<style scoped>
.student-list-test {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.test-section {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

.test-section h2 {
  margin-bottom: 20px;
  color: #333;
  border-bottom: 2px solid #409EFF;
  padding-bottom: 10px;
}

.student-item {
  display: flex;
  gap: 30px;
  padding: 15px;
  margin-bottom: 15px;
  background: white;
  border-radius: 6px;
  border: 1px solid #eee;
}

.student-info, .student-display {
  flex: 1;
}

.student-info div, .student-display div {
  margin: 5px 0;
  font-family: monospace;
}

.pagination-test {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.pagination-test h3 {
  margin-bottom: 15px;
  color: #666;
}

.regex-info {
  background: white;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #eee;
}

.regex-info p {
  font-size: 16px;
  margin-bottom: 15px;
}

.regex-info ul {
  margin: 10px 0;
  padding-left: 20px;
}

.regex-info li {
  margin: 5px 0;
}

.examples {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.examples h4 {
  color: #333;
  margin-bottom: 10px;
}

.examples ul {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
}
</style>
